import React, { useState } from 'react';
import AxCard from '@/components/AxBase/AxCard';
import { Col, Row, Dropdown, Menu, Icon, Button, Drawer, Input, Switch } from 'antd';
import { AxButton } from '@/components/AxBase';
import Search from './components/search';
import Create from './components/create';
import { AxCardListBx } from '@/components/AxCardList';
import { router } from 'umi';
import './style.css';

const { Search: SimpleSearch } = Input;
const Index: React.FC<any> = props => {
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [createVisible, setCreateVisible] = useState(false);

  /** 配置列 */
  const data1 = [
    {
      id: 1,
      icon: 'unordered-list',
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager">管理员</div>
            </div>
            <span
              className="ent-member-card__description"
              style={{ float: 'right', display: 'flex' }}
            >
              &nbsp;
              <Switch defaultChecked={true} size="small" style={{ margin: 'auto' }} />
            </span>
          </div>
          <div className="ent-member-card__description">
            <span>所属单位：计算机学院</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
    },
    {
      id: 2,
      icon: 'plus',
      desc: '这里是增加报名的入口，可点击增加报名',
      click: () => router.push({ pathname: '/buyer/lab/' }),
    },
    {
      id: 3,
      icon: 'plus',
      desc: '这里是增加报名的入口，可点击增加报名',
      click: () => router.push({ pathname: '/buyer/lab/' }),
    },
    {
      id: 4,
      icon: 'plus',
      desc: '这里是增加报名的入口，可点击增加报名',
      click: () => router.push({ pathname: '/buyer/lab/' }),
    },
    {
      id: 5,
      icon: 'plus',
      desc: '这里是增加报名的入口，可点击增加报名',
      click: () => router.push({ pathname: '/buyer/lab/' }),
    },
    {
      id: 6,
      icon: 'plus',
      desc: '这里是增加报名的入口，可点击增加报名',
      click: () => router.push({ pathname: '/buyer/lab/' }),
    },
    {
      id: 7,
      icon: 'plus',
      desc: '这里是增加报名的入口，可点击增加报名',
      // click:()=>router.push({pathname:'/enroll/s/predict/signup/create'}),
    },
    {
      id: 8,
      icon: 'plus',
      desc: '这里是增加报名的入口，可点击增加报名',
      // click:()=>router.push({pathname:'/enroll/s/predict/signup/create'}),
    },
    {
      id: 9,
      icon: 'plus',
      desc: '这里是增加报名的入口，可点击增加报名',
      // click:()=>router.push({pathname:'/enroll/s/predict/signup/create'}),
    },
  ];

  const createProps = {
    visible: createVisible,
    handleVisible: setCreateVisible,
  };

  return (
    <AxCard
      title={
        <>
          <span style={{ fontSize: 16 }}>订单管理</span>
          <span style={{ marginLeft: 12, fontSize: 16 }}></span>
        </>
      }
      bodyStyle={{ backgroundColor: 'rgb(240,242,245)' }}
    >
      <AxCard
        style={{ minHeight: document.body.clientHeight - 95 - 46 - 24 - 24 }}
        bodyStyle={{ padding: 0 }}
      >
        <AxCard
          style={{ paddingTop: 16, paddingBottom: 16 }}
          bodyStyle={{ paddingTop: 0, paddingBottom: 0 }}
        >
          <Row>
            <Col span={4}>
              <SimpleSearch placeholder="搜索" onSearch={(val: any) => {}} allowClear />
            </Col>
            <Col span={20} style={{ textAlign: 'right' }}>
              <AxButton
                className="ax-no-class"
                type="ghost"
                icon="plus"
                style={{ marginRight: 8 }}
                onClick={() => setCreateVisible(true)}
              >
                添加采购主体人员
              </AxButton>
              <span style={{ marginRight: 8 }}>
                <Dropdown
                  trigger={['click']}
                  overlay={
                    <Menu>
                      <Menu.Item key={1}>
                        <Icon type="plus-circle" />
                        &nbsp;未处理
                      </Menu.Item>
                      <Menu.Item key={2}>
                        <Icon type="minus-circle" />
                        &nbsp;已处理
                      </Menu.Item>
                    </Menu>
                  }
                >
                  <Button size="default" type="ghost">
                    <Icon type="filter" />
                    &nbsp;更多操作&nbsp;
                    <Icon type="down" />
                  </Button>
                </Dropdown>
              </span>
              <Button
                type="link"
                icon="unordered-list"
                style={{ fontSize: 20 }}
                onClick={() => setDrawerVisible(true)}
              />
            </Col>
          </Row>
        </AxCard>
        <AxCard bodyStyle={{ paddingTop: 0, paddingBottom: 0 }}>
          <AxCardListBx showAction={true} data={data1} />
        </AxCard>
        <Drawer
          title="条件筛选"
          placement="right"
          maskStyle={{ opacity: 0, animation: 'none' }}
          closable={true}
          onClose={() => setDrawerVisible(false)}
          visible={drawerVisible}
          getContainer={false}
          style={{ position: 'absolute' }}
        >
          {drawerVisible && <Search visible={drawerVisible} />}
        </Drawer>
        {createVisible && <Create {...createProps} />}
      </AxCard>
    </AxCard>
  );
};

export default Index;
